var productList = [];
var _productList;

function init() {
    var id = $.webUtil.getQueryString("id");
    var url = $.constant.webRoot() + 'v1/product?categoryId=' + id;
    mui.ajax(url, {
        dataType: 'json',
        type: 'GET',
        async: false,
        success: function (data) {
            productList = data;
        }
    });

    _productList = $(".product-list");

}

function initView() {

    if (productList) {
        for (var i = 0; i < productList.length; i++) {
            var itemData = productList[i];
            var itemHtml = $('<div class="item" data-id=' + itemData.id + '></div>');

            var itemImg = '<div class="img"><img src="' + itemData.coverPicture + '"></div>';
            var itemTitle = '<div class="title"><div>' + itemData.name + '</div><div>' + itemData.description + '</div></div>';
            var itemPrice = '<div class="price"><span>NT$</span><span>' + itemData.price + '</span></div>';
            itemHtml.append(itemImg);
            itemHtml.append(itemTitle);
            itemHtml.append(itemPrice);
            _productList.append(itemHtml);
        }
    }
}

function initListener() {

    $('.item').bind('tap', function () {
        var id = $(this).data("id");
        var url = '../product/index.html?id=' + id;
        mui.openWindow(url, 'id');
    });
}


$(function () {
    init();
    initView();
    initListener();
});